<template>
  <div class="carModelDetailMain h100">
    <full-parent-dom-with-dask :loading="!activeVehicleId"></full-parent-dom-with-dask>
    <div class="carModelDetailMainTop" v-if="activeVehicleId">
      <a-row type="flex">
        <a-col flex="74px" class="carIconCol">
          <svg class="icon carIcon" aria-hidden="true">
            <use xlink:href="#icon-qiche-zhenshi" v-if="activeVehicleData.vehicleType == 1"></use>
            <use xlink:href="#icon-qiche-test" v-else></use></svg>
        </a-col>
        <a-col flex="auto" class="carModelDetailMainTopDesc">
          <h5>
            {{ activeVehicleData.vin }}
            <lock-risk-jump
              style="margin-left:16px"
              :config="{
                lockFlag:activeVehicleData.lockFlag,
                compatibleRisk:0,
                taskJump:0,
                query:{taskId: '',vehicleId:activeVehicleId }
              }">
            </lock-risk-jump>
          </h5>
          <p class="carModelDetailMainTopDescItems">
            <span>
              {{ $t('vehicleVersion') }}：{{ activeVehicleData.vehicleVersion || '-' }}
            </span>
            <span>
              {{ $t('recentUpdateDate') }}：{{ $commonFun.getDateStr(activeVehicleData.lastUpgradeSuccessTime) }}
            </span>
            <span>
              {{ $t('latestOnline') }}：{{ $commonFun.getDateStr(activeVehicleData.lastActiveTime) }}
            </span>
            <span>
              {{ $t('activityLevel') }}：
              {{ $commonFun.getActivityDay(activeVehicleData.lastActiveTime, $t('activity')).cont || '-' }}
            </span>
          </p>
        </a-col>
      </a-row>
    </div>
    <div class="carModelDetailMainBottom" v-if="activeVehicleId">
      <a-tabs @change="changeTab" class="tabCommon" :active-key="activeKey">
        <!-- 车辆版本 -->
        <a-tab-pane key="vehicleVersion" :tab="$t('vehicleVersion')">
          <div class="tablePageWarp">
            <car-model-detail-version
              v-if=" activeKey === 'vehicleVersion'"
              :time="tabTime"
              @updateinfoevt="showActiveTaskUpdateInfo"
              :vehicle-id="activeVehicleId">
            </car-model-detail-version></div>
        </a-tab-pane>
        <!-- 车辆零件 -->
        <a-tab-pane key="vehiclePart" :tab="$t('vehicleInfor')">
          <div class="tablePageWarp"><car-model-detail-part
            v-if=" activeKey === 'vehiclePart'"
            :time="tabTime"
            @updateinfoevt="showActiveEcuUpdateInfo"
            :vehicle-id="activeVehicleId">
          </car-model-detail-part></div>
        </a-tab-pane>
        <!-- FOTA升级 -->
         <!--<a-tab-pane key="upgradeInformation" :tab="$t('fotaUpdate')">
          <car-model-detail-update-info
            v-if="activeKey==='upgradeInformation'"
            :time="tabTime">
          </car-model-detail-update-info>
        </a-tab-pane>-->
        <!-- FOTA日志 -->
        <!-- <a-tab-pane key="exceptionLog" :tab="$t('fotaLog')">
          <part-update-exception-log
            v-if="activeKey === 'exceptionLog'"
            :default-query="{vehicleId:activeVehicleId}"
            :isSearch="true"
            :time="tabTime">
          </part-update-exception-log>
        </a-tab-pane> -->
        <!-- 车辆服务 -->
        <!-- <a-tab-pane key="vehicleService" :tab="$t('vehicleService')">
          <div class="tablePageWarp">
            <car-model-detail-services
              v-if="activeKey === 'vehicleService'"
              :time="tabTime"
              @showdetail="lookServiceDetail">
            </car-model-detail-services>
          </div>
        </a-tab-pane> -->
        <!-- 订阅详情 -->
        <!-- <a-tab-pane key="vehicleSubscription" :tab="$t('subscribtionDetail')">
          <div class="tablePageWarp">
            <car-model-detail-subscription
              v-if="activeKey === 'vehicleSubscription'"
              :default-query="{vehicleId:activeVehicleId}"
              :serviceCode="serviceCode"
              :time="tabTime">
            </car-model-detail-subscription>
          </div>
        </a-tab-pane> -->
      </a-tabs>
    </div>
    <!-- <div v-else>{{ $t('vinNotExist') }}</div> -->
  </div>
</template>
<script>
import CarModelDetailPart from './CarModelDetailPart'
import CarModelDetailUpdateInfo from './CarModelDetailUpdateInfo'
import PartUpdateExceptionLog from '@/views/components/PartUpdateExceptionLog/index.vue'
import CarModelDetailVersion from './CarModelDetailVersion'
import CarModelDetailServices from './CarModelDetailServices'
import CarModelDetailSubscription from './CarModelDetailSubscription'
import FullParentDomWithDask from '@/components/LoadDataSpin/FullParentDomWithDask.vue'
import { mapState, mapGetters } from 'vuex'
import LockRiskJump from '@/views/components/CustomTag/lockRiskJump.vue'
const initTabKey = 'vehicleVersion'
export default {
  components: {
    CarModelDetailPart,
    CarModelDetailUpdateInfo,
    PartUpdateExceptionLog,
    CarModelDetailVersion,
    CarModelDetailServices,
    CarModelDetailSubscription,
    FullParentDomWithDask,
    LockRiskJump
  },
  props: {
    time: {
      type: Number,
      default: 3571591
    }
  },
  computed: {
    ...mapState({
      activeVehicleData: (state) => state.vehicle.vehicleDetail,
      vehiclePartData: (state) => state.vehicle.vehiclePartData,
      updateQueryParams: (state) => state.vehicle.vehicleEcuUpdateQuery,
      appUpdateQueryParams: (state) => state.vehicle.vehicleAppUpdateQuery
    }),
    ...mapGetters(['getBrandObj']),
    activeVehicleId () {
      if (!this.activeVehicleData) {
        return ''
      }
      return this.activeVehicleData.id
    },
    vehicleStatusDictCodeObj () {
      return this.$store.getters.getDictCodeObj('vehicleStatusDictCode')
    }
  },
  data () {
    return {
      activeKey: initTabKey,
      vehicleTypeObj: {},
      tabTime: 3571599,
      tabKeyConfig: {
        // 是FOTA升级选项卡的时候
        upgradeInformation: {
          resetQuery: 'resetVehicleEcuUpdateQuery'
        }
      },
      serviceCode: ''
    }
  },
  watch: {
    time: {
      handler (val) {
        this.tabTime = val
        this.activeKey = initTabKey
        this.serviceCode = ''
      },
      immediate: true
    }
  },
  created () {
    this.getVehicleTypes()
    this.getPageDictData()
  },
  methods: {
    changeTab (key) {
      this.$emit('tabChange')
      this.activeKey = key
      this.tabTime = Date.now()
      this.serviceCode = ''
      if (this.tabKeyConfig[key] && this.tabKeyConfig[key].resetQuery) {
        this.clearQuery(this.tabKeyConfig[key].resetQuery)
      }
    },
    showActiveEcuUpdateInfo (ecuId) {
      this.$store.commit('resetVehicleEcuUpdateQuery')
      this.updateQueryParams.ecuIds = [ecuId]
      this.activeKey = 'upgradeInformation'
    },
    showActiveTaskUpdateInfo (taskId) {
      this.$store.commit('resetVehicleEcuUpdateQuery')
      this.updateQueryParams.taskIds = [taskId]
      this.activeKey = 'upgradeInformation'
    },
    getVehicleTypes () {
      const obj = {}
      this.$store.state.vehicle.types.forEach(item => {
        obj[item.id] = item.name
      })
      this.vehicleTypeObj = obj
    },
    getPageDictData () {
      ['getVehicleStatusDictCodeData', 'getTaskEcuUpdateDictCodeData'].forEach(method => {
        this.$store.dispatch(method)
      })
    },
    clearQuery (mutation) {
      this.$store.commit(mutation)
    },
    lookServiceDetail (serviceCode) {
      this.serviceCode = serviceCode
      this.activeKey = 'vehicleSubscription'
    }
  }
}
</script>
<style scoped lang="less">
.carModelDetailMain {
  display: flex;
  flex-direction: column;
  .carModelDetailMainTop {
    margin-bottom: 20px;
    flex: none;
    >.ant-row-flex {
      align-items: center;
    }
    .carIconCol {
      margin-right: 20px;
    }
    .carIcon {
      font-size: 74px;
    }
    .carModelDetailMainTopDesc {
      >h5 {
        font-size:18px;
        font-weight: 600;
        margin-bottom: 10px;
        display: flex;
      }
      >p{
        font-size: 1em;
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
<style lang="less">
.carModelDetailMainBottom {
  flex: 1 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  > .ant-tabs {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    .ant-tabs-content {
      flex: 1 0 0;
    }
  }
   .tabCommon {
    .ant-tabs-bar {
      .ant-tabs-nav {
        .ant-tabs-tab {
          padding: 0 0 6px 0;
        }
      }
    }
  }
  .tablePageWarp {
    padding:0;
  }
}
</style>
